<script>
/*
订单列表里首先有自己的个人信息
完成的商品
订单编号
*/
import {
  getOrdersList,
  delOrder,
  getOrders,
  updateOrders,
} from "../../api/otherServer";
import { formatDate } from "../../util/tool.js";
import { statcUrl } from "../../api/api";
import { Dialog } from "vant";
import { S_Status } from "../config/config";
import Orderdetail from "../../components/orderdetail.vue";
export default {
  props: {
    status: {
      type: String,
      default: -1,
    },
  },
  components: {
    ordertatil: Orderdetail,
  },
  data() {
    return {
      statcUrl,
      dataorderList: [], //支付成功的商品数据
      finished: false,
      loading: false,
      page: 1,
      S_Status,
      ordertailShow: false, ///是否显示订单详情页面
      selectOrder: {},
      allpric: "",
    };
  },
  mounted() {
    this.inc();
    // updateOrders({
    //   status: 2,
    //   EMSname: "圆通快递",
    //   EMS: "123435665",
    //   orderid: "588b8123-9183-4341-ac98-ad494195b530",
    // });

    // (res) => {
    //   console.log(res);
    // };
  },
  comouted: {},
  methods: {
    //调动获得订单的接口
    inc() {
      getOrders({ page: this.page, status: this.status }, (res) => {
        let data = res.data[0].data; //将数据获取
        if (data.length === 10) {
          this.page++;
        } else {
          this.finished = true;
        }
        this.dataorderList = [...this.dataorderList, ...data];
        this.loading = false;

        //每个分页的数据有十条
      });
    },

    onLoad() {
      this.loading = true;
      this.inc();
    }, //利用时间字符串格式的工具函数格式化时间 true的时候onload才会执行
    dataStr(str) {
      return formatDate(str);
    },
    changeOrderStatus(orderid, key, value) {
      for (let i = 0; i < this.dataorderList.length; i++) {
        if (this.dataorderList[i].orderid === orderid) {
          this.dataorderList[i][key] = value;
          this.dataorderList = [...this.dataorderList];
          break;
        }
      }
    },
    ordertail() {
      this.ordertailShow = false;
    },
    hideOrder(data) {
      this.selectOrder = data;
      this.allpric = data.allprice;
      this.ordertailShow = true;
    },
    delInfo(orderid, index) {
      return Dialog.confirm({
        title: "删除订单",
        message: "删除订单后数据不可以恢复请您考虑再进行操作",
      })
        .then(() => {
          // on confirm
          delOrder(orderid, (res) => {
            if (res.success) {
              this.dataorderList.splice(index, 1);
              this.dataorderList = [...this.dataorderList];
            }
          });
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
};
</script>
<template>
  <div v-show="!ordertailShow">
    <van-nav-bar
      title="订单中心"
      left-text="返回"
      left-arrow
      fixed
      @click-left="this.$router.go(-1)"
    />
    <van-list
      :immediate-check="false"
      v-model:loading="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <div class="mt-top">
        <div
          class="order-con"
          v-for="(item, index) in dataorderList"
          :key="item.prolist.id"
        >
          <p>创建时间:{{ dataStr(item.createtime) }}</p>
          <p>订单编号:{{ item.orderid }}</p>
          <p class="send">{{ S_Status[item.status] }}</p>
          <van-card
            v-for="o in JSON.parse(item.prolist)"
            :key="o.id"
            :num="o.num"
            :price="o.price"
            :title="o.title"
            :thumb="statcUrl + '/' + o.img"
          />
          <div class="anniu">
            <van-button type="primary" size="mini" @click="hideOrder(item)"
              >查看详情</van-button
            >
            <van-button type="primary" size="mini">查看地址</van-button>
            <van-button
              type="primary"
              size="mini"
              colro="red"
              @click="delInfo(item.orderid, index)"
              v-if="item.status == 0"
              >删除</van-button
            >
            <van-button type="primary" size="mini" v-if="item.status === 3"
              >我要评价</van-button
            >
          </div>
        </div>
      </div>
    </van-list>
  </div>
  <div v-show="ordertailShow">
    <ordertatil
      :ordertail="ordertail"
      :data="selectOrder"
      :totallprice="allpric"
      :changeOrderStatus="changeOrderStatus"
    ></ordertatil>
  </div>
</template>
<style lang="scss" scoped>
.mt-top {
  margin-top: 64px;
}
.order-con {
  margin-bottom: 0.3rem;
  p {
    text-align: right;
    padding-right: 0.3rem;
    font-size: 0.11rem;
    background-color: #fff;
  }
  display: flex;
  flex-direction: column;
  .van-card {
    margin-top: 0;
    background: #fff;
    border-bottom: 1px solid rgb(136, 120, 120);
  }
  .anniu {
    display: flex;
    justify-content: space-between;
    padding: 0.3rem 0.3rem;
    // padding-left: 60%;
    text-align: right;
    background: #fff;
  }
}
</style>
